<!DOCTYPE html>
<html lang="en">

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>one-device-pixel border</title>
		<style>
			/* REF：http://51bits.com/writing/half-point-css-borders-in-ios/ */
			/* transform-origin的属性值的理解参考：http://w3cplus-cdn2.u.qiniudn.com/sites/default/files/styles/print_image/public/blogs/2013/1311/transform-15.jpg */
			
			.box {
				position: relative;
				width: 200px;
				height: 200px;
				overflow: hidden;
				line-height: 200px;
				text-align: center;
				float: left;
				margin: 30px;
				background-color: #eee;
			}
			/*上，下边框*/
			
			.tBor:before, .bBor:after {
				position: absolute;
				content: "";
				height: 1px;
				background: red;
				left: 0;
				right: 0;
			}
			.tBor:before {
				top: 0;
			}
			.bBor:after {
				bottom: 0;
			}
			/*左，右边框*/
			
			.lBor:before, .rBor:after {
				position: absolute;
				content: "";
				width: 1px;
				background: red;
				top: 0;
				bottom: 0;
			}
			.lBor:before {
				left: 0;
			}
			.rBor:after {
				right: 0;
			}
			/*细边框在不同dpi屏幕下的显示*/
			@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx), (-ms-high-contrast:active), (-ms-high-contrast:none) {
				/*上，下边框*/
				.tBor:before, .bBor:after {
					-webkit-transform: scaleY(.5);
					-ms-transform: scaleY(.5);
					-o-transform: scaleY(.5);
					transform: scaleY(.5);
				}
				/*左，右边框*/
				.lBor:before, .rBor:after {
					-webkit-transform: scaleX(.5);
					-ms-transform: scaleX(.5);
					-o-transform: scaleX(.5);
					transform: scaleX(.5);
				}
				/*上，左边框, 四边边框*/
				.tBor:before, .lBor:before {
					-webkit-transform-origin: 0 0;
					-moz-transform-origin: 0 0;
					-ms-transform-origin: 0 0;
					-o-transform-origin: 0 0;
					transform-origin: 0 0;
				}
				/*下，右边框*/
				.bBor:after, .rBor:after {
					-webkit-transform-origin: 100% 100%;
					-moz-transform-origin: 100% 100%;
					-ms-transform-origin: 100% 100%;
					-o-transform-origin: 100% 100%;
					transform-origin: 100% 100%;
				}
			}
			/* 解决1.5屏幕下某些边框不显式问题 */
			
			@media (-webkit-device-pixel-ratio: 1.5) {
				/*上，下边框*/
				.tBor:before, .bBor:after {
					-webkit-transform: scaleY(.6666);
					-ms-transform: scaleY(.6666);
					-o-transform: scaleY(.6666);
					transform: scaleY(.6666);
				}
				/*左，右边框*/
				.lBor:before, .rBor:after {
					-webkit-transform: scaleX(.6666);
					-ms-transform: scaleX(.6666);
					-o-transform: scaleX(.6666);
					transform: scaleX(.6666);
				}
			}
			@media (-webkit-device-pixel-ratio: 3) {
				/*上，下边框*/
				.tBor:before, .bBor:after {
					-webkit-transform: scaleY(.3333);
					-ms-transform: scaleY(.3333);
					-o-transform: scaleY(.3333);
					transform: scaleY(.3333);
				}
				/*左，右边框*/
				.lBor:before, .rBor:after {
					-webkit-transform: scaleX(.3333);
					-ms-transform: scaleX(.3333);
					-o-transform: scaleX(.3333);
					transform: scaleX(.3333);
				}
			}
		</style>
	</head>

	<body>
		<div class="box tBor bBor">
			上， 下border
		</div>
		<div class="box lBor rBor">
			左，右border
		</div>

		<div class="box tBor rBor">
			上，右border
		</div>

		<div class="box lBor bBor">
			左，下border
		</div>

	</body>

</html>